<!-- <template>
  <UserComponent />
</template>
<script>
import UserComponent from './components/UserComponent.vue'
export default {
  components: {
    UserComponent
  }
}
</script> -->
<template>
  <keep-alive>
    <component :is="tabComponent"></component>
  </keep-alive>
  <button @click="chengeHander">切换</button>
  <!-- <ComponentA />
  <ComponentB /> -->
</template>

<script>
import { defineAsyncComponent } from 'vue';
import ComponentA from './components/ComponentA.vue';
const AsComponent = defineAsyncComponent(() => import('./components/ComponentB.vue'))
// import ComponentB from './components/ComponentB.vue';
export default {
  data() {
    return {
      tabComponent: 'ComponentA'
    }
  }
  , components: {
    ComponentA
    , ComponentB
  },
  methods: {
    chengeHander() {
      console.log(11);
      this.tabComponent = this.tabComponent == 'ComponentA' ? 'ComponentB' : 'ComponentA'

    }
  }
}
</script>